<template>
  <div>
    <div class="aside" :class="{ mobile: isMobile }">
      <div class="aside-user">
        <img :src="require('@/assets/img/head-portrait.png')" alt="" />
        <p class="username">Cherry</p>
        <p class="userinfor">
          Never really desperate,only the lost of the soul.
        </p>
      </div>
      <ul>
        <li>
          <img :src="require('@/assets/img/home-mobile.png')" alt="" />
          <span>首页</span>
        </li>
        <li>
          <img :src="require('@/assets/img/label-mobile.png')" alt="" />
          <span>标签</span>
        </li>
        <li>
          <img
            :src="require('@/assets/img/classification-mobile.png')"
            alt=""
          /><span>分类</span>
        </li>
        <li>
          <img :src="require('@/assets/img/link-mobile.png')" alt="" /><span
            >友链</span
          >
        </li>
        <li>
          <img :src="require('@/assets/img/message-mobile.png')" alt="" /><span
            >留言板</span
          >
        </li>
        <li>
          <img :src="require('@/assets/img/about-mobile.png')" alt="" /><span
            >关于我们</span
          >
        </li>
      </ul>
    </div>
    <!---------------------- 手机端aside end ------------------------->
    <!---------------------- 电脑端header begin ------------------------->

    <div class="header" :class="{ mobile: isMobile }" id="headerPc">
      <div class="aside-button">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="team-name ">
        自信即巅峰
      </div>
      <div class="menu">
        <div><img :src="require('@/assets/img/home.png')" alt="" /></div>
        <span>首页</span>
        <div><img :src="require('@/assets/img/label.png')" alt="" /></div>
        <span>标签</span>
        <div>
          <img :src="require('@/assets/img/classification.png')" alt="" />
        </div>
        <span>分类</span>
        <div><img :src="require('@/assets/img/about.png')" alt="" /></div>
        <span>关于</span>
        <div><img :src="require('@/assets/img/message.png')" alt="" /></div>
        <span>留言板</span>
        <div><img :src="require('@/assets/img/link.png')" alt="" /></div>
        <span>友情链接</span>
        <div class="cross ">
          <div class="cross-first">
            <img :src="require('@/assets/img/search.png')" alt="" />
          </div>
          <div class="cross-second">
            <div class="cross-one"></div>
            <div class="cross-two"></div>
          </div>
        </div>
      </div>
      <div class="cross ">
        <div class="cross-first">
          <img :src="require('@/assets/img/search.png')" alt="" />
        </div>
        <div class="cross-second">
          <div class="cross-one"></div>
          <div class="cross-two"></div>
        </div>
      </div>
    </div>
    <div class="search" :class="{ mobile: isMobile }">
      <input class="search-text" type="text" name="" value="" />
      <div class="search-button">
        <img :src="require('@/assets/img/search.png')" alt="" />
      </div>
      <img
        class="search-img"
        :src="require('@/assets/img/search2.png')"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "index",
  computed: {
    ...mapGetters(["isMobile"])
  }
};
</script>

<style lang="less" scoped>
.aside {
  display: none;
  .aside-user {
    width: 100%;
    height: 20%;
    background: -webkit-gradient(
      linear,
      0 100%,
      100% 100%,
      from(#6783af),
      to(#dae6e3)
    ); /** Chrome Safari **/
    background: -moz-linear-gradient(left, #6783af, #dae6e3); /** FireFox **/
    background: -o-linear-gradient(left, #6783af, #dae6e3); /** Opear **/
    background: -ms-linear-gradient(#6783af 0%, #dae6e3 100%); /** IE9 IE10 **/
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#6783AF',endColorstr='#DAE6E3'); /** IE7 **/
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6783AF',endColorstr='#DAE6E3',gradientType=1); /** IE8 **/
    box-shadow: 0 2px 2px #797979;
    img {
      margin: 5px 0 0 15px;
    }
    .username {
      margin: -5px 0 0 15px;
      font-size: 26px;
      color: white;
    }
    .userinfor {
      margin: 5px 0 0 15px;
      width: 85%;
      font-size: 11px;
      color: white;
    }
  }
  &.mobile {
    &.show {
      display: block;
      height: 100vh;
      width: 45%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #eac3c3;
      z-index: 999;
    }
  }
  ul {
    list-style-type: none;
    li {
      margin-left: -22px;
      margin-bottom: 15px;
      span {
        margin-left: 40px;
        font-size: 14px;
        color: white;
      }
      img {
        vertical-align: middle;
      }
    }
  }
}
.header {
  height: 44px;
  width: 100%;
  background-color: transparent;
  top: 0;
  position: fixed;
  z-index: 100;
  transition: all 1s;
  &.mobile {
    .aside-button {
      display: block;
      position: fixed;
      left: 30px;
      top: 13px;
    }
    .team-name {
      text-align: center;
      width: 100px;
      margin: 0 auto;
      float: none;
    }
    .menu {
      display: none;
      .cross {
        display: none;
      }
    }
    .cross {
      position: fixed;
      right: 40px;
      top: 0;
      .cross-first {
        display: block;
        left: 0;
      }
      .cross-second {
        display: none;
        left: 0;
        .cross-two {
          left: 0;
        }
      }
      &.show {
        .cross-first {
          display: none;
        }
        .cross-second {
          display: block;
        }
      }
    }
  }
  &.fixed {
    background: #4568dc;
    background: -webkit-linear-gradient(
      to right,
      #4568dc,
      #b06ab3
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #4568dc,
      #b06ab3
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .aside-button {
    display: none;
    &:nth-child(1) {
      width: 15px;
      border-top: 3px solid white;
      margin-bottom: 3px;
    }
    &:nth-child(2) {
      width: 15px;
      border-top: 3px solid white;
      margin-bottom: 3px;
    }
    &:nth-child(3) {
      width: 15px;
      border-top: 3px solid white;
    }
  }
  .team-name {
    color: white;
    line-height: 44px;
    margin-left: 15%;
    font-size: 15px;
    float: left;
  }
  .menu {
    float: right;
    color: white;
    margin-right: 10%;
    line-height: 44px;
    font-size: 15px;
    div {
      height: 10px;
      float: left;
      img {
        position: relative;
        top: 3px;
        margin-left: 10px;
      }
    }
    span {
      float: left;
      margin: 0 5px;
    }
    .cross {
      display: block;
      .cross-first {
        position: relative;
        line-height: 44px;
        width: 16px;
      }
      .cross-second {
        margin-top: 22px;
        width: 16px;
        position: relative;
        left: 7px;
        top: -2px;
        .cross-one {
          position: absolute;
          width: 16px;
          border-top: 3px solid white;
          transform: rotate(45deg);
          z-index: 1000;
        }
        .cross-two {
          position: absolute;
          width: 16px;
          left: 7px;
          border-bottom: 3px solid white;
          transform: rotate(135deg);
          z-index: 1000;
        }
      }
    }
  }
  .cross {
    display: none;
    &.show {
      .cross-first {
        display: none;
      }
      .cross-second {
        display: block;
      }
    }
    .cross-first {
      display: block;
      position: relative;
      line-height: 44px;
      width: 16px;
    }
    .cross-second {
      display: none;
      margin-top: 22px;
      width: 16px;
      position: relative;
      left: 7px;
      top: -2px;
      .cross-one {
        position: absolute;
        width: 16px;
        border-top: 3px solid white;
        transform: rotate(45deg);
        z-index: 1000;
      }
      .cross-two {
        position: absolute;
        width: 16px;
        left: 7px;
        border-bottom: 3px solid white;
        transform: rotate(135deg);
        z-index: 1000;
      }
    }
  }
}
.search {
  display: none;
  height: 33px;
  width: 100%;
  border-bottom: 1px solid white;
  position: fixed;
  top: 44px;
  background-color: white;
  animation: search-key 1s linear;
  z-index: 10;

  &.show {
    display: block;
  }

  &.mobile {
    &.show {
      display: block;
    }
    .search-text {
      width: 80%;
      border: 0 solid white;
      margin-left: 30px;
      position: absolute;
      font-size: 15px;
      height: 22px;
      margin-top: 5px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    .search-button {
      background-color: #ffdddd;
      width: 10%;
      height: 34px;
      position: fixed;
      left: 90%;
      z-index: 10;
      text-align: center;
      box-shadow: 0 1px 1px white;
      img {
        margin-top: 10px;
      }
    }
    .search-img {
      display: block;
    }
  }
  .search-img {
    line-height: 33px;
    margin-right: 20px;
    margin-top: 10px;
  }
  .search-text {
    outline: none;
    border: 0 solid white;
    border-bottom: 1px solid #d0d0d0;
    width: 55%;
  }
}
@keyframes search-key {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
